
<script setup>
import {ref,watch} from 'vue'
import { loginService,getCode,uploadHole } from '../../api/apis';
import {onLoad,onShow, onUnload,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"


const API_KEY = "8d854579c2b384487808bc29193e404c";   //高德地图api_key
const upload_desc=ref('')
const upload_location=ref('')
const upload_city=ref('')
const is_takePhoto=ref(true)
const show_upload=ref(false)
const latitude=ref()
const longitude=ref()
const marker=ref()
const polyline=ref()
const show=ref('')
const risk_arr=ref( ['严重缺陷', '中等缺陷', '轻微缺陷'])
const risk_index=ref(0)
const position=ref({})
const location =ref();
const img=ref()					//坑洞图片
const flag_chart =ref(false)   //是否生成缺陷图标志
const start_point=ref({})      //起始位置
const end_point=ref({})        //终点位置
//分享给朋友
onShareAppMessage((e)=>{
	return {
		title:"智途安行",
		path:"/pages/index/index"
	}
})
//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"666",
		imageUrl:"/static/logo.png"
	}
})
	

	
const mapContext = ref();
	
	
const risk_tranfer=(str)=>{
		if(str==='严重缺陷')
		return 'serious'
		else if(str==='中等缺陷')
		return 'medium'
		return 'slight'
}

onLoad(()=>{
	/*latitude.value=uni.getStorageSync("latitude")
	longitude.value=uni.getStorageSync("longitude")*/
	latitude.value=27.89399660294029
	longitude.value=112.92514114166886
	setTimeout(() => { 
		// 添加延时确保组件已渲染
	    mapContext.value = uni.createMapContext('myMap');
	}, 300);
	location.value=JSON.stringify({
	latitude:uni.getStorageSync("latitude") ,
	longitude: uni.getStorageSync("longitude"),
    })
	//模拟数据，点
	marker.value=[
		{},
		{},
		{
		//默认id>=50，为道路缺陷
		id:50,
		latitude:27.90190086,
		longitude:112.92329213,
		title:"标记",
		img:'',
		iconPath:"/static/坑洞.png",
		callout:{
			content:"缺陷",
			color:"#FF0000",
			fontSize:10}
		},
	    {
		id:1,
		latitude:27.901836,
		longitude:112.921619,
		title:"标记",
		iconPath:"/static/起点.png",
		callout:{
			content:"起点",
			color:"#32CD32",
			fontSize:10
	    }},
	    {
		id:2,
		latitude:27.902686,
		longitude:112.923641,
		iconPath:"/static/终点.png",
		title:"标记",
		callout:{
			content:"终点",
			color:"#FF0000",
			fontSize:10
	    }}
	] 	
	
	//模拟数据,线
	polyline.value=[
		{
			arrowLine:true,
			width:8,
			color:"#32CD32",
			points:[
				  { "latitude": 27.901836, "longitude": 112.921619 },
				  	{ "latitude": 27.90189076, "longitude": 112.92223642 },
				  	{ "latitude": 27.90188177, "longitude": 112.92316295 },
				  	{ "latitude": 27.90269759, "longitude": 112.92316974 },
				  	{ "latitude": 27.90269159, "longitude": 112.92339374 },
				  	{ "latitude": 27.902686, "longitude": 112.923641 }
			]
			
		},
		{
			arrowLine:true,
			width:8,
			color:"#32CD32",
			points:[
			  { "latitude": 27.90188415,"longitude": 112.92224053 },
			  { "latitude": 27.90268599, "longitude": 112.92222702 },
			  { "latitude": 27.90297468, "longitude": 112.92255745 },
			  { "latitude": 27.9031906, "longitude": 112.92318826 },
			  { "latitude": 27.90270084, "longitude": 112.9231843 },
			]
		},
		{
			arrowLine:true,
			width:8,
			color:"#FF0000",
			points:[
				{ "latitude": 27.90189289, "longitude": 112.9231694 },
				{ "latitude": 27.90194987, "longitude": 112.92317585 }
			]
		 },
		 {
			 arrowLine:true,
			 width:8,
			 color:"#32CD32",
			 points:[
					  { "latitude": 27.90188648, "longitude": 112.9222521 },
					  { "latitude": 27.90072714, "longitude": 112.92228047 },
					  { "latitude": 27.90072505, "longitude": 112.92318811 },
					  { "latitude": 27.90187604, "longitude": 112.92317393 }
	                ]
		 }
	]
		 
		 
	 
})
	
	

	
	
	
const show_photo=(e)=>{
	//判断是否为缺陷
	if(e.markerId<50) return 
	console.log(e)
	uni.showModal({
		title: '提示',
		content: '是否查看当前缺陷照片',
		success: function (res) {
				if (res.confirm) {
					show.value=true
				} else if (res.cancel) {}
			}
		});
}
	
const del_photo=()=>{
	show.value=false
}
	
	
		
	const take_photo=(e)=>{
		uni.chooseImage({
			count:1,
			success:(res)=>{
				
				img.value=res.tempFilePaths[0]
				show_upload.value=true
				is_takePhoto.value=false
				
			}
		})
	}
	const cancel=()=>{
		img.value=''
		show_upload.value=false
		is_takePhoto.value=true
		upload_desc.value=''
	}
	
	const determina=async()=>{
		if(!upload_desc.value || !upload_location.value || !upload_city.value){
			uni.showToast({
				title:"请完善表格",
				icon:"error"
			})
			return 
		}
		const arr=upload_location.value.split(' ')
		
		const data={
			image:img.value,
			latitude:arr[0],
			longitude:arr[1],
			city:upload_city.value,
			risk:risk_tranfer(risk_arr.value[risk_index.value]),
			status:"0"
		}
		
	
		
		const res=await uploadHole()
	
		if(res.data.code===1){
			uni.showToast({
				title:"上传成功",
				icon:"success"
			})
			
			cancel()
		}
		
		else {
			uni.showToast({
				title:"上传失败",
				icon:"error"
			})
		}
		
	}
	
	
	const  key=ref("点击获取当前位置的经纬度")
	const get_lalo=()=>{
		upload_location.value=uni.getStorageSync("latitude")+" "+uni.getStorageSync("longitude")
	}
	
	//监听详情数据变化
	watch(upload_location, (newVal, oldVal) => {
	  key.value=upload_location.value?'':"点击获取当前位置的经纬度"
	})
	
	
	  const bindPickerChange=(e)=> {
	       
	       risk_index.value = e.detail.value;
	}
	
	
	//标记：1.是在地图选点上点击了   2.是直接在地图上点击了
const flag=ref(0)


//移动位置
const moveToLocation=(e)=>{
		mapContext.value.moveToLocation({
			longitude: e.detail.longitude,
			latitude:e.detail.latitude
		})
		latitude.value=e.detail.latitude
		longitude.value=e.detail.longitude
		//该数据第一个元素作为点击地图触发事件
		marker.value[flag.value]={
			id:flag.value,
			longitude: e.detail.longitude,
			latitude:e.detail.latitude,  
			iconPath:"/static/起点.png" ,
			callout:{
				content:"终点",
				color:"#FF0000",
				fontSize:10,
			}
		}
}	

	
//地图选点功能
const confirmEndPoint=(e)=>{
	uni.choosePoi({
		success:(e1)=>{
			const address=e1.address+e1.name
			uni.request({
			   	url:`https://restapi.amap.com/v3/geocode/geo?key=${API_KEY}&address=${address}`,
				success: (e2) => {
					const tmp = e2.data.geocodes[0].location.split(',')
					
					//e=1,则是起点；e=2，则是终点
					if(e==1) start_point.value = {longitude:tmp[0],latitude:tmp[1],address:e1.name}
					else end_point.value = {longitude:tmp[0],latitude:tmp[1],address:e1.name}
					
					moveToLocation({detail:{
						longitude:tmp[0],
						latitude:tmp[1]
					},distinct:e})
					
				 }
			   })
		   }
	   })
}
	
//授权
const showAuth=ref(true)
const getAddress=()=>{
		uni.getFuzzyLocation({
					type: 'gcj02',
					success: function (res) {
						
						uni.setStorageSync("latitude",res.latitude)
						uni.setStorageSync("longitude",res.longitude)
						showAuth.value=false
					    },
					fail: function (err) {
					    uni.showToast({
					        title: '获取失败,权限不够',
					        icon:'none'
					    });
					}
				});
}


//不授权自动返回主页
const handleDeny=()=>{
	uni.switchTab({
	url:'/pages/index/index'
	})
}
//授权获取地址
const handleChooseAddress=()=>{
	try{
		getAddress()
	}catch(e){
		
	}
}
	
	
	  
const generateChart = () => {
  if (!end_point.value.address) {
    uni.showToast({
      title: "请在地图上选择终点位置",
      icon: "none",
      duration: 2000
    });
    return;
  }
  // 模拟数据加载
  uni.showLoading({ 
    title: "道路分析中...",
    mask: true
  });
  
  setTimeout(() => {
    flag_chart.value = true;
    uni.hideLoading();
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 400,
      success: () => {
        uni.showToast({
          title: "生成完成！",
          icon: "success",
          duration: 1500
        });
      }
    });
  }, 2000);
};	        

</script>

<template>
	 <view v-if="showAuth" class="auth-container" >
	    <!-- 半透明遮罩 -->
	    <view class="auth-mask"></view>
	    
	    <!-- 授权内容区域 -->
	    <view class="auth-content">
	      <!-- 图标区域 -->
	      <image class="auth-icon" src="/static/auth-icon.png" mode="aspectFit"></image>
	      
	      <!-- 文字说明 -->
	      <view class="text-area">
	        <text class="auth-title">功能授权提醒</text>
	        <text class="auth-desc">需要您授权以下权限才能使用该功能\n授权后即可享受完整服务</text>
	      </view>
	
	      <!-- 按钮组 -->
	      <view class="button-group">
	        <button 
	          class="auth-btn deny-btn" 
	          @tap="handleDeny"
	          >暂不授权</button>
	        <button 
	          class="auth-btn confirm-btn" 
	          @tap="handleChooseAddress"
	          >立即授权</button>
	      </view>
	    </view>
	  </view>
  <view class="container" v-else>
   <!-- 顶部提示信息 -->
    <view class="tip-box" v-if='flag_chart===false'>
      <text  class="tip-text">请确定终点位置，以便生成相应的道路缺陷分布图</text>
    </view>
	
	<!-- 起点终点选择模块 -->
	<view class="position-picker">
	  <!-- 起点选择 -->
	  <view class="picker-item start-point"  @tap='confirmEndPoint(1)'>
	    <image class="icon" src="/static/起点.png" mode="aspectFit"></image>
	    <view class="input-wrapper">
	      <text class="label">出发地点</text>
	      <input 
	        class="input" 
	        placeholder="请选择起点（默认当前位置）" 
	        placeholder-class="placeholder"
			v-model='start_point.address'
	        disabled
	      />
	    </view>
	    <image class="arrow" src="/static/arrow-right.png" mode="aspectFit"></image>
	  </view>
	
	  <!-- 分隔线 -->
	  <view class="divider"></view>
	
	  <!-- 终点选择 -->
	  <view class="picker-item end-point" @tap='confirmEndPoint(2)'>
	    <image class="icon" src="/static/终点.png" mode="aspectFit"></image>
	    <view class="input-wrapper">
	      <text class="label">到达地点</text>
	      <input
	        class="input"
	        placeholder="请选择终点位置"
	        placeholder-class="placeholder"
			v-model="end_point.address"
	        disabled
	      />
	    </view>
	    <image class="arrow" src="/static/arrow-right.png" mode="aspectFit"></image>
	  </view>
	</view>
	

    <!-- 地图容器 -->
    <view class="map-container">
      <map class="map" scale="17" @markertap="show_photo" 
	       id="myMap"
           :polyline="flag_chart===true?polyline:''" :markers="flag_chart===true?marker:''" @tap="moveToLocation" 
           :latitude="latitude" :longitude="longitude" show-location>
      </map>
	  
	  <!-- 生成缺陷分布图-->
	  <view v-if='flag_chart===false' class="generate-btn" @tap="generateChart" :class="{disabled: !end_point.address}">
	    <image class="chart-icon"  :src="!end_point.address?'/static/终点.png':'/static/chart-line.png'"></image>
	    <text class="btn-text">生成缺陷分布图</text>
	    <view class="sparkle"></view>
	  </view>
      
      <!-- 图例 -->
    <view class="legend" v-if='flag_chart===true'>
      <!--缺陷类型循环 -->
      <view class="legend-item" v-for="(item,index) in ['严重缺陷','中等缺陷','轻微缺陷']" :key="index">
        <view class="color-block" :class="risk_tranfer(item)"></view>
        <text class="legend-text">{{item}}</text>
      </view>
      
      <!-- 起点终点 -->
      <view class="legend-item">
        <view class="start-point"><image src="../../static/起点.png"  style="width: 40rpx;height: 40rpx;"></image></view>
        <text class="legend-text" style="margin-left: 20rpx;">起点</text>
      </view>
      <view class="legend-item">
        <view class="end-point"><image src="../../static/终点.png" style="width: 40rpx;height: 40rpx;"></image></view>
        <text class="legend-text" style="margin-left: 20rpx;">终点</text>
      </view>
    </view>
    </view>

    <!-- 照片预览 -->
    <view v-if="show" class="photo-modal" @touchmove="del_photo">
      <view class="modal-content">
        <image class="preview-image" src="../../static/hole.jpg" mode="widthFix"></image>
        <text class="close-tip">上滑关闭预览</text>
      </view>
    </view>
<!-- 拍照按钮组 -->
<view class="button-group" v-if='flag_chart===true'>
  <!-- 确定起点按钮 -->
  <view class="confirm-start-btn" @tap="generateChart">
    <image class="start-icon" src="/static/终点.png"></image>
    <text class="btn-text">重新生成</text>
  </view>

  <!-- 拍照按钮 -->
  <view class="camera-btn" @tap="take_photo">
    <image class="camera-icon" src="/static/相机.png"></image>
    <text class="btn-text">上传缺陷</text>
  </view>
</view>

    <!-- 上传表单 -->
    <view v-if="show_upload" class="upload-card">
      <view class="card-header">
        <text class="card-title">缺陷信息录入</text>
      </view>

      <view class="form-container">
        <view class="form-item">
          <text class="item-label">当前位置（经纬度）：</text>
          <view class="location-wrapper">
            <input class="location-input" v-model="upload_location" 
                   placeholder="点击右侧获取定位" disabled/>
            <view class="get-location" @tap="get_lalo">
              <image class="location-icon" src="/static/起点.png"></image>
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="item-label">所在城市：</text>
          <input class="city-input" v-model="upload_city" 
                 placeholder="请输入城市名称"/>
        </view>

        <view class="form-item">
          <text class="item-label">缺陷描述：</text>
          <textarea class="desc-textarea" v-model="upload_desc" 
                    placeholder="请详细描述缺陷情况" auto-height/>
        </view>

        <view class="form-item">
          <text class="item-label">严重程度：</text>
          <picker class="risk-picker" mode="selector" :range="risk_arr" @change="bindPickerChange">
            <view class="picker-content">
              {{risk_arr[risk_index]}}
              <image class="arrow-down" src="/static/arrow-down.png"></image>
            </view>
          </picker>
        </view>

        <view class="preview-wrapper">
          <image class="upload-preview" :src="img" mode="aspectFit"></image>
        </view>

        <view class="btn-group">
          <button class="confirm-btn" @tap="determina">提交信息</button>
          <button class="cancel-btn" @tap="cancel">取消</button>
        </view>
      </view>
    </view>
  </view>

</template>

<style lang="scss" scoped>
	/* 新增样式 */
	.generate-btn {
	  position: fixed;
	  bottom: 180rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  background: linear-gradient(135deg, rgba(0, 184, 148, 0.9), rgba(0, 206, 201, 0.9));
	  backdrop-filter: blur(10px);
	  padding: 24rpx 48rpx;
	  border-radius: 999rpx;
	  display: flex;
	  align-items: center;
	  box-shadow: 0 8rpx 32rpx rgba(0, 184, 148, 0.2);
	  z-index: 100;
	  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	  border: 1rpx solid rgba(255, 255, 255, 0.1);
	  
	  &::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    border-radius: 999rpx;
	    background: linear-gradient(135deg, 
	      rgba(255, 255, 255, 0.2) 0%,
	      rgba(255, 255, 255, 0) 50%,
	      rgba(255, 255, 255, 0.2) 100%);
	  }
	
	  &.disabled {
	    background: rgba(200, 200, 200, 0.8);
	    box-shadow: none;
	    pointer-events: none;
	  }
	
	  .chart-icon {
	    width: 44rpx;
	    height: 44rpx;
	    margin-right: 16rpx;
	    filter: drop-shadow(0 2rpx 4rpx rgba(0,0,0,0.1));
	  }
	
	  .btn-text {
	    color: #fff;
	    font-size: 32rpx;
	    font-weight: 500;
	    text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
	  }
	
	  .sparkle {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    background: radial-gradient(circle at 50% 0%, 
	      rgba(255,255,255,0.4) 0%,
	      rgba(255,255,255,0) 70%);
	  }
	
	  &:active {
	    transform: translateX(-50%) scale(0.96);
	    opacity: 0.9;
	  }
	}
	.position-picker {
	  background: #f8f9fb;
	  border-radius: 16rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
	  padding: 0 24rpx;
	  margin: 24rpx 0;
	
	  .picker-item {
	    display: flex;
	    align-items: center;
	    padding: 28rpx 0;
	    position: relative;
	
	    .icon {
	      width: 48rpx;
	      height: 48rpx;
	      margin-right: 20rpx;
	      flex-shrink: 0;
	    }
	
	    .input-wrapper {
	      flex: 1;
	      .label {
	        display: block;
	        font-size: 24rpx;
	        color: #909399;
	        margin-bottom: 8rpx;
	      }
	      .input {
	        font-size: 32rpx;
	        color: #303133;
	        height: 56rpx;
	        line-height: 56rpx;
	        caret-color: #409EFF;
	      }
	    }
	
	    .arrow {
	      width: 32rpx;
	      height: 32rpx;
	      margin-left: 16rpx;
	      opacity: 0.6;
	    }
	
	
	  }
	
	  .divider {
	    height: 1px;
	    background: #ebeef5;
	    margin-left: 68rpx;
	  }
	
	  .placeholder {
	    color: #c0c4cc !important;
	    font-size: 30rpx !important;
	  }
	
	  /* 激活状态 */
	  &.active {
	    box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.15);
	    border: 1px solid #ecf5ff;
	  }
	}
	
	.auth-container {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 999;
	  
	  .auth-mask {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.6);
	    backdrop-filter: blur(4px);
	  }
	
	  .auth-content {
	    position: relative;
		height: 380rpx;
	    width: 80%;
	    max-width: 600rpx;
	    padding: 40rpx;
	    background: #FFFFFF;
	    border-radius: 24rpx;
	    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	  }
	
	  .auth-icon {
	    width: 160rpx;
	    height: 160rpx;
	    margin-bottom: 30rpx;
	  }
	
	  .text-area {
		position: absolute;
		
	    text-align: center;
	    margin-bottom: 100rpx;
	  }
	
	  .auth-title {
	    display: block;
	    font-size: 36rpx;
	    color: #333;
	    font-weight: 600;
	    margin-bottom: 20rpx;
	  }
	
	  .auth-desc {
	    display: block;
	    font-size: 28rpx;
	    color: #666;
	    line-height: 1.6;
	    white-space: pre-wrap;
	  }
	
	  .button-group {
	    display: flex;
	    gap: 20rpx;
		margin-left: 10rpx;
		
	    width: 80%;
	  }
	
	  .auth-btn {
	    flex: 1;
	    height: 80rpx;
	    line-height: 80rpx;
	    border-radius: 12rpx;
	    font-size: 30rpx;
	    transition: all 0.3s;
	    
	    &::after {
	      border: none;
	    }
	
	    &.deny-btn {
	      background: rgba(0, 0, 0, 0.05);
	      color: #999;
	    }
	
	    &.confirm-btn {
	      background: linear-gradient(135deg, #ff944d, #ff5a5f);
	      color: #fff;
	      box-shadow: 0 6rpx 12rpx rgba(255, 90, 95, 0.3);
	    }
	  }
	}
	
	
	
	
	
	/* 新增按钮组样式 */
	.button-group {
	  position: fixed;
	  bottom: 60rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  display: flex;
	  gap: 30rpx;
	  z-index: 99;
	}
	/* 新增起点按钮样式 */
	.confirm-start-btn {
	  background: linear-gradient(135deg, #00b894, #00cec9);
	  padding: 20rpx 40rpx;
	  border-radius: 50rpx;
	  display: flex;
	  align-items: center;
	  box-shadow: 0 8rpx 24rpx rgba(0,184,148,0.3);
	  flex-shrink: 0;
	  position: absolute;
	  top: -150rpx;
	  left: 80rpx;
	}
	
	/* 通用按钮内容样式 */
	.start-icon {
	  width: 50rpx;
	  height: 50rpx;
	  margin-right: 16rpx;
	}
	
	.btn-text {
	  color: #fff;
	  font-size: 30rpx;
	  font-weight: 500;
	  white-space: nowrap;
	}
	
	/* 小屏幕适配 */
	@media (max-width: 360px) {
	  .button-group {
	    flex-direction: column;
	    gap: 20rpx;
	  }
	  
	  .camera-btn, .confirm-start-btn {
	    padding: 18rpx 36rpx;
	  }
	  
	  .btn-text {
	    font-size: 28rpx;
	  }
	}
.container {
  padding: 20rpx;
  background: #f5f6fa;
}

.tip-box {
  background: #e8f4ff;
  border-radius: 12rpx;
  padding: 15rpx;
  margin-bottom: 20rpx;
  border: 1px solid #d0e3ff;
  
  .tip-text {
    color: #2a7bf5;
    font-size: 22rpx;
    line-height: 1;
  }
}

.map-container {
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
  
  .map {
    height: 900rpx;
    width: 100%;
  }

  .legend {
    position: absolute;
    bottom: 200rpx;
    right: 20rpx;
    background: rgba(255,255,255,0.9);
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);

    .legend-item {
      display: flex;
      align-items: center;
      margin: 12rpx 0;

      .color-block {
        width: 40rpx;
        height: 40rpx;
        border-radius: 6rpx;
        margin-right: 16rpx;

        &.serious { background: #ff4757; }
        &.medium { background: #ffa502; }
        &.slight { background: #2ed573; }
		
      }

      .legend-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.photo-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .modal-content {
    width: 80%;
    text-align: center;

    .preview-image {
      width: 100%;
      border-radius: 16rpx;
    }

    .close-tip {
      color: #fff;
      font-size: 28rpx;
      margin-top: 20rpx;
      opacity: 0.8;
    }
  }
}

.camera-btn {
  position: fixed;
  bottom: 60rpx;
  left: -170rpx;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2a7bf5, #2d8cf0);
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(42,123,245,0.3);
  z-index: 99;
  flex-shrink: 0;

  .camera-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 16rpx;
	
	
  }

  .btn-text {
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
  }
}

.upload-card {
  position: fixed;
  bottom: -50rpx;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);
  padding: 40rpx;
  z-index: 100;

  .card-header {
    margin-bottom: 30rpx;
    
    .card-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 32rpx;
        background: #2a7bf5;
        border-radius: 4rpx;
      }
    }
  }

  .form-item {
    margin-bottom: 30rpx;

    .item-label {
      display: block;
      color: #666;
      font-size: 28rpx;
      margin-bottom: 12rpx;
    }

    .location-wrapper {
      display: flex;
      align-items: center;
      background: #f8f9fb;
      border-radius: 12rpx;
      padding: 16rpx;

      .location-input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }

      .get-location {
        padding: 10rpx;
        background: #e8f4ff;
        border-radius: 8rpx;

        .location-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .risk-picker {
      .picker-content {
        background: #f8f9fb;
        padding: 20rpx;
        border-radius: 12rpx;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .arrow-down {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }

    .desc-textarea {
      background: #f8f9fb;
      padding: 20rpx;
      border-radius: 12rpx;
      }
  }

  .preview-wrapper {
    margin: 30rpx 0;
    
    .upload-preview {
      width: 100%;
      height: 300rpx;
      border-radius: 12rpx;
    }
  }

  .btn-group {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;

    button {
      flex: 1;
      height: 80rpx;
      border-radius: 12rpx;
      font-size: 30rpx;
      transition: all 0.3s;

      &::after { border: none; }
    }

    .confirm-btn {
      background: linear-gradient(135deg, #2a7bf5, #2d8cf0);
      color: #fff;

      &:active {
        opacity: 0.9;
        transform: scale(0.98);
      }
    }

    .cancel-btn {
      background: #f8f9fb;
      color: #666;

      &:active {
        background: #eee;
      }
    }
  }
}
</style>
